<template>
  <div style="width:100%;height:200px;" id="hiddenBar"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourcePie",
  props: {
    LineDataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    LineDataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var bar = echarts.init(document.getElementById("hiddenBar"));
      var xData = [];
      var hiddenData = [];
      this.LineDataSource.forEach((item, index) => {
        xData.push(item.name);
        hiddenData.push(item.alarm_count);
      });
      let option = {
        color: ["#22b9ff", "#ffb822", "#fd27eb", "#1dc9b7"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: xData,
          orient: "vertical",
          x: "right"
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: xData,
           axisLine: {
            lineStyle: {
              color: "#fff"
              // width: 2
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: "value",
             minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            lineStyle: {
              color: "#fff"
              // width: 2
            }
          }
          },
          
        ],
        series: {
          name: "区域隐患告警",
          type: "bar",
          barWidth: "50%",
          data: hiddenData,
          itemStyle: {
            normal: {
              color: function(params) {
                // build a color map as your need.
                var colorList = [
                "#22b9ff", "#ffb822", "#fd27eb", "#1dc9b7",
                  "#FE8463",
                  "#9BCA63",
                  "#FAD860",
                  "#F3A43B",
                  "#60C0DD",
                  "#D7504B",
                  "#C6E579",
                  "#F4E001",
                  "#F0805A",
                  "#26C0C0"
                ];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: "top",
                formatter: "{b}\n{c}"
              }
            }
          }
        }
      };

      bar.setOption(option);
      window.addEventListener("resize", function() {
        bar.resize();
      });
    }
  }
};
</script>
